<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>

</head>
<body>
    <button id="btn">按钮</button>
    <script>
        const myAxios=axios.create({
            baseURL: "http://gmall-h5-api.atguigu.cn/",
            timeout:9999,
        })
        /* 
        请求拦截器的失败函数进入条件
          1. 条件1
            - 首先设置请求拦截器use方法的第三个参数option对象的synchronous属性为true(打开同步)
            - 当请求拦截器的成功回调中,如果出现了异常信息被抛出,则直接进入失败的回调函数中

          2. 条件2
            - 假设有两个请求拦截器,分别是拦截器1 和 拦截器2,拦截器1先执行,拦截器2后执行
            - 如果拦截器1中的成功函数返回了失败的promise实例,则拦截器2的失败的回调函数会执行
            - 总结:2的失败回调就是为了处理1的成功回调中抛出失败

      */
     myAxios.interceptors.request.use(
        (config) =>{
            //throw new Error("请求拦截器成功函数报错!!!")
           console.log("第一个请求蓝机器成功的config打印",config); 
           //return Promise.reject("第一个拦截器成功函数返回失败的promise实例")
           return config;
        },
        (error) =>{
            console.log("第一个请求拦截器失败函数的error打印",error);
            return Promise.reject("第二个请求拦截器错误")
        },
        {
            synchronous:false,
        }
     );
     myAxios.interceptors.request.use(
        (config) =>{
            //throw new Error("请求拦截器成功函数报错!!!!")
            console.log("第二个请求拦截器成功函数的config打印",config);
            //return Promise.reject("第一个拦截器成功函数返回失败的promise实例")
            return config;
        },
        (error) => {
          console.log("第二个请求拦截器失败函数的error打印", error);
          return Promise.reject("第二个请求拦截器错误");
        },
        {
          synchronous: false,
        }
      );
    /*
    响应拦截器的失败函数进入条件
    -请求已经发送到服务器,但是在服务器没有得到预想的结果
    -比如:超时 服务器宕机(5xx) 找不到数据(4xx)等等
    */
   myAxios.interceptors.response.use(
    (response) =>{
        console.log(1111);
        console.log("第一个响应拦截器成功函数的response打印",response);
        return response;
    },
    (error)=>{
        console.log("第一个响应拦截器失败函数的error打印",error);
        return Promise.reject("第一个响应拦截器错误")
    }
   );
   myAios.interceptors.response.use(
    (response)=>{
        console.log(222);
        console.log("第一个响应拦截器函数的response打印",response);
        return response;
    },
    (error)=>{
        console.log("第一个响应拦截器失败函数的error打印",error);
        return Promise.reject("第一个响应拦截器错误")
    }
   )
   const oBtn =document.getElementById("btn")
   oBtn.onclick=async function(){
    try{
        const result =await myAios.get("/api/product/getBaseCategoryList")
        console.log(result,"result");
    }catch(e){
        console.log("在异常处理中的错误信息打印","e");
    }
   }

    </script>
    
</body>
</html>